<template>
	<view>
		<cu-custom v-if="PageCur!='message'" bgColor="bg-black" :isBack="true">
			<block slot="content">成为律师</block>
		</cu-custom>
		<form>
			<view class="cu-form-group my-title">
				<view class="title">姓名</view>
				<input v-model="form.lawyerName" placeholder="请输入您的姓名" name="input"></input>
			</view>
			<view class="cu-form-group" @click="ChooseImage">
				<view class="title">上传身份证正反面</view>
				<view class="cu-capsule radius">
					<button class="cu-btn round bg-green shadow">
						<text class="cuIcon-upload"></text> 上传</button>
				</view>
			</view>
			<view class="cu-form-group" style="min-height: 0;border-top: 0;">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" style="margin-top: 20upx;" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					 :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-form-group">
				<view class="title">上传真实头像</view>
				<view class="cu-capsule radius">
					<button @click="ChooseImage2" class="cu-btn round bg-green shadow">
						<text class="cuIcon-upload"></text> 上传</button>
				</view>
			</view>
			<view class="cu-form-group" style="min-height: 0;border-top: 0;">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" style="margin-top: 20upx;" v-for="(item,index) in imgHeadList" :key="index" @tap="ViewImage2"
					 :data-url="imgHeadList[index]">
						<image :src="imgHeadList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
				</view>
			</view>


			<view class="cu-form-group" @click="handServe">
				<view class="title">擅长领域</view>
				<view class="picker">
					{{form.goodAt==''?'请选择':form.goodAt}}
				</view>
			</view>
			<view class="cu-form-group" @click="handSiteName">
				<view class="title">常驻地区</view>
				<view class="picker">
					{{siteName==''?'请选择':siteName}}
				</view>

			</view>
			<view class="cu-form-group my-title">
				<view class="title">执业年限</view>
				<input type="number" v-model="form.practiceYear" placeholder="请输入您的执业年限" name="input"></input>
			</view>
			<view class="cu-form-group my-title">
				<view class="title">职业证号</view>
				<input type="number" v-model="form.occupation" placeholder="请输入您的职业证号" name="input"></input>
			</view>
			<view class="cu-form-group my-title">
				<view class="title">自我介绍</view>
				<input v-model="form.content" placeholder="请输入自我介绍" name="input"></input>
			</view>
			<view class="cu-form-group my-title">
				<view class="title">律师费用</view>
				<input type="number" v-model="form.lawyerMoney" placeholder="请输入自我介绍" name="input"></input>
			</view>
			<view class="line-row" style="margin-bottom: 200upx;">

			</view>
		</form>
		<view class="my-mb">
			
		</view>
		<subBtn @handSub='handSub'></subBtn>
		<modal ref='myModal' @subModal='subModal'>
			<view class="modal-list">
				<view class="topic-list">
					<view class="item-box" v-for="item in caseArr" :key='item.id'>
						<view class="item" @click="handSele(item)">
							<view class="title">
								#{{item.dataValue}}#
							</view>
							<image v-if="item.isFlg==false" class="icon" src="../../../static/img-topic-no.png" mode=""></image>
							<image v-if="item.isFlg==true" class="icon" src="../../../static/img-topic.png" mode=""></image>
						</view>
						<view class="line-row" style="margin: 30upx 0;">

						</view>
					</view>

				</view>
			</view>
		</modal>
		<lbPicker ref="pickerSite" mode="multiSelector" :list="siteArr" :level="3" @confirm="handSite"><text slot="action-center">请选择</text></lbPicker>
	</view>
</template>

<script>
	import lbPicker from '../../components/lbPicker'
	import modal from '../../components/modal/modal'
	import subBtn from '../../components/subBtn/subBtn.vue'
	import siteArr from '../../components/lbPicker/area-data-min.js'
	export default {
		components: {
			lbPicker,
			subBtn,
			modal
		},
		data() {
			return {
				siteArr: siteArr,
				siteName: '',
				imgList: [],
				caseValue: [],
				caseArr: [],
				imgHeadList: [],
				form: {
					goodAt: '',
					content: '',
					occupation: '',
					practiceYear: '',
					handUrl: '',
					idCardUrl: '',
					lawyerName: ''
				},
				names: '',
				userMsg: {},
				isShow: '',
				newid: ''
			};
		},
		async onLoad(e) {
			this.isShow = e.id
			console.log(e)
			if (uni.getStorageSync('USER')) {
				this.userMsg = JSON.parse(uni.getStorageSync('USER'))
			}
			if (e.id == 3) {
				this.newid = e.id
				let lawMsg = await this.http.useridByLawyer2({
					userid: this.userMsg.id
				})
				if (lawMsg.isVerify == 1) {
					this.userMsg.isVerify = 1
					this.userMsg.identity = 2
					uni.setStorageSync('USER', JSON.stringify(this.userMsg))
					uni.showModal({
						content: '恭喜,您已经通过审核啦',
						showCancel: false,
						success: () => {
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}
					})

				}
				this.form = lawMsg
				this.siteName = lawMsg.lawyerAddress
				this.imgHeadList = lawMsg.handUrl.split(',')
				this.imgList = lawMsg.idCardUrl.split(',')
				console.log(lawMsg)
			}
			let res = await this.http.getFieldList()
			res.forEach(item => {
				item.isFlg = false
			})
			this.caseArr = res
		},
		methods: {
			handSiteName() {
				this.$refs.pickerSite.show()
			},
			handSite(item) {
				console.log(item)
				this.siteName = []
				item.item.forEach(ele => {
					this.siteName.push(ele.label)
				})
				this.siteName = this.siteName.join('-')
				this.form.lawyerAddress = this.siteName
			},
			handSub() {
				this.form.idCardUrl = this.imgList.join(',')
				this.form.handUrl = this.imgHeadList.join(',')
				console.log(this.form)
				if (this.newid == 3) {
					uni.showToast({
						title: '您的申请正在审核中,请勿重复提交',
						icon: 'none'
					})
					return
				}
				if (this.form.content == '') {
					uni.showToast({
						title: '请输入自我介绍',
						icon: 'none'
					})
					return
				}
				if (this.form.idCardUrl == '') {
					uni.showToast({
						title: '请上传身份证正反面',
						icon: 'none'
					})
					return
				}
				if (this.form.handUrl == '') {
					uni.showToast({
						title: '请上传用户真实头像',
						icon: 'none'
					})
					return
				}
				if (this.form.lawyerName == '') {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}
				if (this.form.occupation == '') {
					uni.showToast({
						title: '请输入职业证号',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中...',
					icon: 'none'
				})
				this.http.addYuLawyer(this.form).then(async res => {
					uni.hideLoading()
					// await this.subPay(res)
					uni.showToast({
						title: "提交成功,等待审核",
						icon: 'none'
					})
					this.userMsg.isVerify = 3
					uni.setStorageSync('USER', JSON.stringify(this.userMsg))
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}, 1000)

				})
			},
			subModal() {
				let newIDs = []
				let newNames = []
				this.caseArr.forEach(item => {
					if (item.isFlg == true) {
						newIDs.push(item.id)
						newNames.push(item.dataValue)
						this.form.goodAt = newNames.join(',')
						this.names = newNames.join(',')
					}
				})
				this.$refs.myModal.modalName = null
			},
			handSele(item) {
				item.isFlg = !item.isFlg
			},
			handServe() {
				this.$refs.myModal.modalName = 'bottomModal'
				// this.$refs.picker.show()
			},
			handleConfirm2(item) {
				this.caseName = item.item[0].label
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						this.http.uploadFile({
							filePath: res.tempFilePaths[0]
						}).then(res2 => {
							console.log('上传结果222', res2)
							let newData = JSON.parse(res2.data)
							this.imgList.push(newData.message)

						})
						console.log(res, 'ressss')
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImage2() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						this.http.uploadFile({
							filePath: res.tempFilePaths[0]
						}).then(res2 => {
							console.log(res2, '上传结果')
							let newData = JSON.parse(res2.data)
							this.imgHeadList = []
							this.imgHeadList.push(newData.message)

						})
						console.log(res, 'ressss')
					}
				});
			},
			ViewImage2(e) {
				uni.previewImage({
					urls: this.imgHeadList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg2(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgHeadList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.my-title {
		.title {
			min-width: 50upx;
		}
	}

	.topic-list {
		padding: 0 30upx;
		box-sizing: border-box;
		margin-top: 36upx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				color: #333333;
				font-size: 28upx;
				font-weight: bold;
			}

			.icon {
				width: 41upx;
				height: 41upx;
			}
		}
	}
</style>
